<script setup lang="ts">
import { hasAuth, getAuths } from "@/router/utils";
import { useI18n } from "vue-i18n";

defineOptions({
  name: "PermissionButtonRouter"
});

const { t } = useI18n();
</script>

<template>
  <div>
    <p class="mb-2!">
      {{ t("permission.button.currentCodes") }}{{ getAuths() }}
    </p>

    <el-card shadow="never" class="mb-2">
      <template #header>
        <div class="card-header">{{ t("permission.button.componentWay") }}</div>
      </template>
      <el-space wrap>
        <Auth value="permission:btn:add">
          <el-button plain type="warning">
            {{ t("permission.button.hasCode") }}'permission:btn:add'
            {{ t("permission.button.visible") }}
          </el-button>
        </Auth>
        <Auth :value="['permission:btn:edit']">
          <el-button plain type="primary">
            {{ t("permission.button.hasCode") }}['permission:btn:edit']
            {{ t("permission.button.visible") }}
          </el-button>
        </Auth>
        <Auth
          :value="[
            'permission:btn:add',
            'permission:btn:edit',
            'permission:btn:delete'
          ]"
        >
          <el-button plain type="danger">
            {{ t("permission.button.hasCode") }}['permission:btn:add',
            'permission:btn:edit', 'permission:btn:delete']
            {{ t("permission.button.visible") }}
          </el-button>
        </Auth>
      </el-space>
    </el-card>

    <el-card shadow="never" class="mb-2">
      <template #header>
        <div class="card-header">{{ t("permission.button.functionWay") }}</div>
      </template>
      <el-space wrap>
        <el-button v-if="hasAuth('permission:btn:add')" plain type="warning">
          {{ t("permission.button.hasCode") }}'permission:btn:add'
          {{ t("permission.button.visible") }}
        </el-button>
        <el-button v-if="hasAuth(['permission:btn:edit'])" plain type="primary">
          {{ t("permission.button.hasCode") }}['permission:btn:edit']
          {{ t("permission.button.visible") }}
        </el-button>
        <el-button
          v-if="
            hasAuth([
              'permission:btn:add',
              'permission:btn:edit',
              'permission:btn:delete'
            ])
          "
          plain
          type="danger"
        >
          {{ t("permission.button.hasCode") }}['permission:btn:add',
          'permission:btn:edit', 'permission:btn:delete']
          {{ t("permission.button.visible") }}
        </el-button>
      </el-space>
    </el-card>

    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          {{ t("permission.button.directiveWay") }}
        </div>
      </template>
      <el-space wrap>
        <el-button v-auth="'permission:btn:add'" plain type="warning">
          {{ t("permission.button.hasCode") }}'permission:btn:add'
          {{ t("permission.button.visible") }}
        </el-button>
        <el-button v-auth="['permission:btn:edit']" plain type="primary">
          {{ t("permission.button.hasCode") }}['permission:btn:edit']
          {{ t("permission.button.visible") }}
        </el-button>
        <el-button
          v-auth="[
            'permission:btn:add',
            'permission:btn:edit',
            'permission:btn:delete'
          ]"
          plain
          type="danger"
        >
          {{ t("permission.button.hasCode") }}['permission:btn:add',
          'permission:btn:edit', 'permission:btn:delete']
          {{ t("permission.button.visible") }}
        </el-button>
      </el-space>
    </el-card>
  </div>
</template>
